<template>
  <div class="previous-next">
    <p @click="previous1()">上一条：{{ PreviousTitle }}</p>
    <p @click="next1()">下一条：{{ NextTitle }}</p>
  </div>
</template>

<script>
// 调用封装的好requests
import requests from "@/api/request";
// 引入QS库
import Qs from "qs";
export default {
  name: "PreviousNext",
  data() {
    return {
      previous: [],
      next: [],
      pid: this.$route.query.id,
    };
  },
  watch: {
    $route(to, from) {
      this.pid = to.query.id;
      const previousupdate = (params) => {
        return requests({
          url: this.url,
          method: "post",
          data: Qs.stringify(
            { page: 1 }, //将对象序列化成URL的形式，以&进行拼接
            { indices: false } //重写false
          ),
          params: { id: this.pid * 1 + 1 }, //向服务器数据库发送id
        });
      };
      previousupdate().then((res) => {
        const previousupdate = res.data; //接收返回值
        this.previous = previousupdate; //news接收数据
      });
      const next = (params) => {
        return requests({
          url: this.url,
          method: "post",
          data: Qs.stringify(
            { page: 1 }, //将对象序列化成URL的形式，以&进行拼接
            { indices: false } //重写false
          ),
          params: { id: this.pid * 1 - 1 }, //向服务器数据库发送id
        });
      };
      next().then((res) => {
        const nextupdate = res.data; //接收返回值
        this.next = nextupdate; //news接收数据
      });
    },
  },
  created() {
    const previous = (params) => {
      return requests({
        url: this.url,
        method: "post",
        data: Qs.stringify(
          { page: 1 }, //将对象序列化成URL的形式，以&进行拼接
          { indices: false } //重写false
        ),
        params: { id: this.pid * 1 + 1 }, //向服务器数据库发送id
      });
    };
    previous().then((res) => {
      const previous = res.data; //接收返回值
      this.previous = previous; //news接收数据
    });
    const next = (params) => {
      return requests({
        url: this.url,
        method: "post",
        data: Qs.stringify(
          { page: 1 }, //将对象序列化成URL的形式，以&进行拼接
          { indices: false } //重写false
        ),
        params: { id: this.pid * 1 - 1 }, //向服务器数据库发送id
      });
    };
    // 应用idnews实例
    next().then((res) => {
      const next = res.data; //接收返回值
      this.next = next; //news接收数据
    });
  },
  computed: {
    // 前一条数据
    PreviousTitle: {
      get() {
        if (this.previous.id == undefined) {
          return "已经到最前面~";
        } else {
          return this.previous.title;
        }
      },
    },
    // 后一条数据
    NextTitle: {
      get() {
        if (this.next.id == undefined) {
          return "后面没有新闻~";
        } else {
          return this.next.title;
        }
      },
    },
  },
  methods: {
    // 向下跳转一页
    next1() {
      if (this.next.id == undefined) {
      } else {
        --this.pid;
        scrollTo(0, 0);
        this.$router.push({
          query: { key: this.title, article: this.article, id: this.pid },
        });
      }
    },
    // 向上跳转一页
    previous1() {
      if (this.previous.id == undefined) {
      } else {
        ++this.pid;
        scrollTo(0, 0);
        this.$router.push({
          query: { key: this.title, article: this.article, id: this.pid },
        });
      }
    },
  },
  props: { url: String, title: String, article: Number },
};
</script>

<style></style>
